<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角落故事</title>
</head>

<body>
    <div class="container">
        <header class="one">
            <h1>角落故事</h1>
        </header>
        <section class="btn">
            <div class="first">
                <img src="http://via.placeholder.com/200" alt="">
                <h3>一把剪刀</h3>
            </div>
            <div class="second">
                <img src="http://via.placeholder.com/200" alt="">
                <h3>一台缝纫机</h3>
            </div>
            <div class="third">
                <img src="http://via.placeholder.com/200" alt="">
                <h3>一碗甜水面</h3>
            </div>
            <div class="fourth">
                <img src="http://via.placeholder.com/200" alt="">
                <h3>一台机床</h3>
            </div>

        </section>

        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            .container {
                width: 1000px;
                height: 1000px;
                margin: 20px auto;
                padding: 30px;
                background: #f1f1f1;
                box-sizing: border-box;
            }
            
            .one {
                text-align: center;
                line-height: 30px;
            }
            
            .btn div {
                width: 400px;
                height: 400px;
                background-color: #fef3e1;
                border: 6px double #ecc98f;
            }
            
            .first {
                vertical-align: top;
                float: left;
                margin: 50px auto 40px 40px;
                padding: 80px 100px;
                text-align: center;
                box-sizing: border-box;
            }
            
            .third {
                vertical-align: bottom;
                float: left;
                margin: 30px auto 40px 40px;
                padding: 80px 100px;
                text-align: center;
                box-sizing: border-box;
            }
            
            .second {
                vertical-align: top;
                float: right;
                margin: 50px 40px 40px auto;
                padding: 80px 100px;
                text-align: center;
                box-sizing: border-box;
            }
            
            .fourth {
                vertical-align: bottom;
                float: right;
                margin: 30px 40px 40px auto;
                padding: 80px 100px;
                text-align: center;
                box-sizing: border-box;
            }
            
            .btn div h3 {
                line-height: 50px;
                text-align: center;
            }
        </style>

    </div>



</body>

</html>